<template>
	<view class="chat-container">
		<!-- 消息列表区域 -->
		<scroll-view 
			class="message-list" 
			scroll-y 
			:scroll-top="scrollTop"
			:scroll-with-animation="true"
		>
			<view 
				v-for="(item, index) in messageList" 
				:key="index" 
				class="message-item"
				:class="{'right': item.senderId == userId}"
			>
				<image 
					class="avatar" 
					:src="api.FileById + item.senderAvatar" 
					mode="aspectFill"
				></image>
				<view class="bubble">
					<text>{{ item.content }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 固定在底部的输入框 -->
		<view class="input-footer">
			<uv-input 
				v-model="content" 
				placeholder="输入消息" 
				border="surround"
				class="input-box"
				@confirm="sender"
			></uv-input>
			<uv-button 
				@click="sender" 
				type="primary" 
				customStyle="height:86rpx;margin-left:20rpx;"
			>发送</uv-button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import api from './api';
import { useSignalR } from '../../services/signalR.js'
import { useUserStore } from '../../stores/user';

const userStore = useUserStore()
const userId = userStore.userId
const id = ref('')
const messageList = ref([])
const content = ref('')
const sR = ref()
const scrollTop = ref(999) // 初始滚动到底部

	import { useSignalRStore } from '../../stores/signalRStore.js'

onMounted(() => {
	initChat()
})

const initChat = async () => {
	let pages = getCurrentPages()
	id.value = pages[pages.length - 1].options.id
	
	// 初始化SignalR
	sR.value = useSignalRStore()
	
	// 监听新消息
	sR.value.on("ReceiveMessage", (senderId, avatar, content) => {
		messageList.value.push({
			senderId: senderId,
			senderAvatar: avatar,
			content: content,
			isMine: false
		})
		scrollToBottom()
	})
	
	// 加载历史消息
	getMessage()
}

const getMessage = () => {
	api.getMessageList(id.value).then(res => {
		if(res.successed) {
			messageList.value = res.datas
			// 数据加载后滚动到底部
			nextTick(() => {
				scrollToBottom()
			})
		}
	})
}

const sender = () => {
	if (!content.value.trim()) return

	// 添加本地消息
	messageList.value.push({
		senderId: userId,
		senderAvatar: userStore.avatar,
		content: content.value,
		isMine: true
	})
	
	// 发送消息
	sR.value.invoke(id.value, content.value)
	
	// 清空输入并滚动
	content.value = ''
	 scrollToBottom()
}

// 滚动到底部方法
const scrollToBottom = async () => {
	await nextTick()
	scrollTop.value = 999998 // 通过随机值强制触发滚动
			setTimeout(() => {
				scrollTop.value = 999999 // 确保滚动到底部
			}, 50)
}

onUnmounted(() => {
	sR.value.off('ReceiveMessage')
})
</script>

<style lang="scss">
.chat-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;

	.message-list {
		flex: 1;
		padding: 20rpx 20rpx 120rpx; /* 底部留出输入框高度 */
		background-color: #f5f5f5;
		box-sizing: border-box;
		overflow: auto;
		
		.message-item {
			display: flex;
			margin: 20rpx 0;
			align-items: flex-start;
			min-height: 100rpx;

			&.right {
				flex-direction: row-reverse;
				
				.bubble {
					background-color: #007AFF;
					color: white;
				}
			}

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin: 0 20rpx;
				flex-shrink: 0;
			}

			.bubble {
				max-width: 70%;
				padding: 20rpx 30rpx;
				border-radius: 16rpx;
				background-color: white;
				color: #333;
				font-size: 28rpx;
				line-height: 1.5;
				word-break: break-word;
				position: relative;
			}
		}
	}

	.input-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx;
		padding-right: 40rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eee;
		z-index: 100;
		box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.05);

		.input-box {
			flex: 1;
		}
	}
}
</style>